<template>
  <div class="goodsList">
    <el-table :data="getGoods" border style="width: 100%">
      <el-table-column prop="id" label="商品编号" width="180">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="商品价格"> </el-table-column>
      <el-table-column prop="market_price" label="市场价格" width="180">
      </el-table-column>
      <el-table-column prop="img" label="图片" width="180">
        <template slot-scope="item">
          <div>
            <img v-if="item.row.img" :src="'http://localhost:3000' + item.row.img" class="imgGoods" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="isnew" label="是否新品">
        <template slot-scope="item">
          <div>
            <el-tag v-if="item.row.isnew == 1" type="success">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" width="180">
        <template slot-scope="item">
          <div>
            <el-tag v-if="item.row.ishot == 1" type="success">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="item">
          <div>
            <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
            <el-tag v-else type="info">禁止</el-tag>
          </div>
        </template> </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="item">
          <div>
            <el-button @click="edit(item.row.id)" type="primary" size="small">编辑</el-button>
            <el-button @click="delGoods(item.row.id)" type="danger" size="small">删除</el-button>
          </div>
        </template>

      </el-table-column>
    </el-table>
    <!-- page-size  	每页显示条目个数，支持 .sync 修饰符 -->
    <!-- total  总条目数 -->
    <el-pagination @current-change="changeGoods" background :page-size="getSize" layout="prev, pager, next"
      :total="getCount">
    </el-pagination>
  </div>
</template>
<script>
import { goodsdelete } from "../../request/api"
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      tableData: [],
    };
  },
  computed: {
    ...mapGetters({
      getGoods: 'goods/getGoods',
      //页码
      getPageNum: 'goods/getPageNum',
      //商品总数
      getCount: 'goods/getCount',
      //每一页的个数
      getSize: 'goods/getSize'
    })
  },
  mounted() {
    this.getGoodsAction()
    this.getCountGoodAction()
  },
  methods: {
    ...mapActions({
      //获取列表数据
      getGoodsAction: 'goods/getGoodsAction',
      //获取商品总数
      getCountGoodAction: 'goods/getCountGoodAction',
      //修改页码
      getPageNumAction: 'goods/getPageNumAction'
    }),
    //页码切换
    changeGoods(e) {
      //页码切换  向vuex赋值
      this.getPageNumAction(e)
    },
    //编辑按钮  传递id用来获取数据
    edit(id) {
      this.$emit('edit', id)
    },
    //数据删除
    delGoods(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodsdelete({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              //重新调用总数
              this.getCountGoodAction()
              //删除成功 重新获取列表数据
              this.getGoodsAction()
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
  },
};
</script>
<style scoped>
.imgGoods {
  width: 60px;
  height: 60px;
}
</style>